<template>
	<div class="mod-home" :style="{ height: mainWrapperHeight + 'px' }">
		<el-row :gutter="20" style="padding:0;margin:0">
			<el-col :span="12" style="padding:0 8px 0 0;margin:0">
				<div class="map-container">
					<el-card :body-style="{ height: mapWrapperHeight + 'px', padding: '16px' }">
						<main-title>遥感监测地图</main-title>
						<div id="mapHome" :style="{ height: mapWrapperHeight - 66 + 'px' }">
							<!--              <img :src="mapUrl" style="width:100%;height:100%;objectFit:fill"/>-->
						</div>
					</el-card>
				</div>
			</el-col>
			<el-col :span="12" style="padding:0 0 0 8px;margin:0">
				<el-card :body-style="{ height: warnWrapperHeight + 'px', padding: '16px' }">
					<main-title>当前预警信息</main-title>
					<div class="flex-wrap">
						<div :style="{ height: warnWrapperHeight - 66 + 'px' }" v-for="(item, index) in warnList" :key="index">
							<div
								:style="{
									backgroundImage: 'url(' + item.bg + ')',
									width: warnWrapperHeight / 2 + 10 + 'px'
								}"
								class="warn-item-wrap"
							>
								<div
									:style="{
										height: warnWrapperHeight - 120 + 'px',
										lineHeight: warnWrapperHeight - 50 + 'px'
									}"
								>
									{{ item.label }}
								</div>
								<div><countTo :startVal="0" :endVal="item.value" :duration="1500" /></div>
							</div>
						</div>
					</div>
				</el-card>
				<el-card :body-style="{ height: landWrapperHeight + 'px', padding: '16px' }" style="margin-top:16px" v-loading="!isAcreShow">
					<div class="acre-container">
						<div class="acre-more" @click="handleClickMore">查看更多</div>
						<main-title>地块导航</main-title>
						<div class="acre-wrap" ref="acreParentWrap" style="height:100%">
							<div class="acre-wrap" style="flex:1;" v-if="isAcreShow">
								<div
									style="letter-spacing:4px;margin-top:-30px;font-size: 18px;font-weight: bolder;color: #A8A297;flex:1;text-align:center"
									v-if="acreList.length == 0"
								>
									暂无数据
								</div>
								<div v-else class="acre-wrap" style="flex:1;margin-top:-30px">
									<div class="acre-wrap acre-wrap-item"><acre-card ref="acreCard0" /></div>
									<div class="acre-wrap acre-wrap-item"><acre-card ref="acreCard1" v-if="acreList[1] && acreList[1].id" /></div>
									<div class="acre-wrap acre-wrap-item"><acre-card ref="acreCard2" v-if="acreList[2] && acreList[2].id" /></div>
								</div>
							</div>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<div class="charts-container" :style="{ height: chartWrapperHeight + 'px' }">
			<div class="charts-item-wrap">
				<el-card
					:body-style="{
						padding: 0,
						margin: 0,
						height: chartWrapperHeight + 'px',
						boxSizing: 'borderBox'
					}"
					v-loading="inspectionStatus"
				>
					<div style="padding:20px 20px 0px 20px;display:flex">
						<main-title>巡田统计</main-title>
						<div style="flex:1;display:flex;align-items: center;justify-content: flex-end">
							<div style="color:#019865;font-weight:bolder;font-size:14px;margin-top:-15px">地块一</div>
							<div style="display:flex;align-items:baseline;justify-content:flex-end;font-size:14px;width:130px;margin-top:-20px">
								<span>巡田预警</span>
								<span style="font-size:24px;padding: 0 6px;font-weight:bolder;color:#019865">
									<countTo :startVal="0" :endVal="findLandCount" :duration="1500" />
								</span>
								<span>次</span>
							</div>
						</div>
					</div>
					<div id="chart_xuntian" style="height:100%;width:100%;"></div>
				</el-card>
			</div>
			<div class="charts-item-wrap">
				<el-card
					:body-style="{
						padding: 0,
						margin: 0,
						height: chartWrapperHeight + 'px',
						position: 'relative'
					}"
					v-loading="stockAnalysisStatus"
				>
					<div style="padding:20px 20px 0px 20px;display:flex">
						<main-title>农资库存分析</main-title>
						<div style="flex:1;display:flex;align-items: center;justify-content: flex-end;margin-top:-20px;font-size:14px" v-if="!stockAnalysisStatus">
							<div v-for="item in stockItemList" :key="item.id" style="margin-left:10px">
								{{ item.goodName }}
								<span style="font-size:24px;font-weight:bolder;color:#019865;display:inline-block;">{{ item.stockQty ? item.stockQty * 1 : 0 }}</span>
								{{ item.unit }}
							</div>
						</div>
					</div>
					<div style="height:32px;display:flex;justify-content:center;align-items:flex-end">
						<div>
							<div class="inventory-item-wrap">
								<div
									v-for="(item, index) in stockItemList"
									:key="item.id"
									:class="{
										'inventory-item': true,
										'inventory-item-active': currentNZ == index
									}"
									@click="handleClickType(index)"
								>
									{{ item.goodName }}
								</div>
							</div>
						</div>
					</div>
					<div id="chart_nongzi" style="height:100%;width:100%;"></div>
				</el-card>
			</div>
			<div class="charts-item-wrap">
				<el-card
					:body-style="{
						padding: 0,
						margin: 0,
						height: chartWrapperHeight + 'px'
					}"
					v-loading="taskCountStatus"
				>
					<div style="padding:20px 20px 0px 20px;display:flex"><main-title>农事任务统计</main-title></div>
					<div class="task-wrapper-up">
						<div
							:style="{
								backgroundImage: 'url(' + tongji1 + ')',
								height: '100%',
								flex: 1,
								backgroundSize: '100% 100%',
								marginRight: '6px'
							}"
						>
							<div class="task-item-wrap">
								<div class="task-item-title">总任务</div>
								<div class="task-item-value"><countTo :startVal="0" :endVal="taskCount1" :duration="1500" /></div>
								<div class="task-item-type">个</div>
							</div>
						</div>
						<div
							:style="{
								backgroundImage: 'url(' + tongji2 + ')',
								height: '100%',
								flex: 1,
								backgroundSize: '100% 100%',
								marginLeft: '6px'
							}"
						>
							<div class="task-item-wrap">
								<div class="task-item-title">已办</div>
								<div class="task-item-value"><countTo :startVal="0" :endVal="taskCount2" :duration="1500" /></div>
								<div class="task-item-type">个</div>
							</div>
						</div>
					</div>
					<div class="task-wrapper-down">
						<div
							:style="{
								backgroundImage: 'url(' + tongji3 + ')',
								height: '100%',
								flex: 1,
								backgroundSize: '100% 100%',
								marginRight: '6px'
							}"
						>
							<div class="task-item-wrap">
								<div class="task-item-title">代办</div>
								<div class="task-item-value"><countTo :startVal="0" :endVal="taskCount3" :duration="1500" /></div>
								<div class="task-item-type">个</div>
							</div>
						</div>
						<div
							:style="{
								backgroundImage: 'url(' + tongji4 + ')',
								height: '100%',
								flex: 1,
								backgroundSize: '100% 100%',
								marginLeft: '6px'
							}"
						>
							<div class="task-item-wrap">
								<div class="task-item-title">过期</div>
								<div class="task-item-value">
									<span style="white-space:nowrap;text-overflow:ellipsis;overflow:hidden"><countTo :startVal="0" :endVal="taskCount4" :duration="1500" /></span>
								</div>
								<div class="task-item-type">个</div>
							</div>
						</div>
					</div>
				</el-card>
			</div>
		</div>
		<!--    <video-player-->
		<!--      playsinline-->
		<!--      class="vjs-custom-skin"-->
		<!--      :options="playerOptions"-->
		<!--      customEventName="changed"-->
		<!--      @ready="playerIsReady"-->
		<!--      @changed="playerStateChanged($event)"-->
		<!--    ></video-player>-->
		<!--    <video-player-->
		<!--      class="vjs-custom-skin"-->
		<!--      :options="playerOptions"-->
		<!--      :playsinline="true"-->
		<!--      @ready="playerReadied($event)"-->
		<!--    ></video-player>-->
	</div>
</template>

<script>
import PubSub from 'pubsub-js';
import videojs from 'video.js';
import 'videojs-flash';
import 'videojs-hotkeys';
import * as echarts from 'echarts';
import countTo from 'vue-count-to';
import { getLandProperties } from '@/api/material';
import { queryLandListList, queryTaskAllCount, queryInspectionFrequency, queryStockAnalysis, queryStockAnalysisDetail } from '@/api/home';
import mainTitle from '@/components/main-title';
import acreCard from '@/components/acre-card';
import { getUUID } from '../../utils';

import 'ol/ol.css';
import Fill from 'ol/style/Fill';
import Map from 'ol/Map';
import View from 'ol/View';
import { Vector, Tile as TileLayer } from 'ol/layer';
import { OSM, Vector as VectorSource } from 'ol/source';
import { GeoJSON } from 'ol/format';
import { Style, Stroke, Circle as CircleStyle } from 'ol/style';
import { fromLonLat, transformExtent, toLonLat } from 'ol/proj';
import { Select, DoubleClickZoom, DragPan, MouseWheelZoom, Draw, Modify, Snap } from 'ol/interaction';
import ImageWMS from 'ol/source/ImageWMS';
import Image from 'ol/layer/Image';
import { toStringHDMS } from 'ol/coordinate';
export default {
	components: {
		'main-title': mainTitle,
		'acre-card': acreCard,
		countTo
	},
	data() {
		return {
			initMapStatus: 0,
			map: null,
			image: null,
			raster: null,
			draw: null,
			snap: null,
			source: null,
			genJson: null,
			playerOptions: {
				height: '660',
				autoplay: true,
				muted: true,
				playbackRates: [0.7, 1, 1.3, 1.5, 1.7],
				sources: [
					{
						type: 'application/x-mpegURL',
						// src: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" //
						src: 'http://106.74.128.154:83/openUrl/sdYWnII/live.m3u8' //
					}
				]
			},
			chart01: null,
			chart02: null,
			taskCount1: 0,
			taskCount2: 0,
			taskCount3: 0,
			taskCount4: 0,
			findLandCount: 0,
			taskCountStatus: false,
			stockAnalysisStatus: false,
			targetStockId: '',
			warnCount: [0, 0, 0],
			stockItemList: [],
			mainWrapperHeight: 0, // 界面可视化高度
			mapWrapperHeight: 0, // 地图高度，根据界面可视化高度计算
			warnWrapperHeight: 0, // 预警高度，根据界面可视化高度计算
			landWrapperHeight: 0, //地块导航高度，根据界面可视化高度计算
			chartWrapperHeight: 0, //echarts高度，根据界面可视化高度计算
			tongji1: require('@/assets/img/home/zongrenwu.png'),
			tongji2: require('@/assets/img/home/yiban.png'),
			tongji3: require('@/assets/img/home/daiban.png'),
			tongji4: require('@/assets/img/home/guoqi.png'),
			mapUrl: require('@/assets/img/home/baseMap.png'),
			icons: require('../../icons/svg/icon-admin.svg'),
			warnImg: require('@/assets/img/home/warning.png'),
			warnList: [
				{
					label: '土壤',
					index: 1,
					value: 5,
					flag: 1,
					bg: require('@/assets/img/home/rurang.png')
				},
				{
					label: '病虫害',
					index: 2,
					value: 12,
					flag: 0,
					bg: require('@/assets/img/home/chonghai.png')
				},
				{
					label: '环境',
					index: 3,
					value: 32,
					flag: 1,
					bg: require('@/assets/img/home/huanjing.png')
				},
				{
					label: '气象',
					index: 4,
					value: 5,
					flag: 1,
					bg: require('@/assets/img/home/tianqi.png')
				},
				{
					label: '监控',
					index: 4,
					value: 2,
					flag: 1,
					bg: require('@/assets/img/home/jiankong.png')
				}
			],
			acreList: [],
			isAcreShow: false,
			currentNZ: 0,
			NZOptions: [],
			unitArray: [],
			inspectionStatus: false,
			XTDataList: [
				{
					a: []
				}
			],
			NZDataList: [
				{ data1: null, data2: null, data1Label: null, data2Label: null },
				{ data1: null, data2: null, data1Label: null, data2Label: null },
				{ data1: null, data2: null, data1Label: null, data2Label: null }
			]
		};
	},
	created() {
		this.requestBaseMap();
		this.getLandInfo();
		this.$dynamic(window, document, 84, height => {
			this.mainWrapperHeight = height;
			this.mapWrapperHeight = this.mainWrapperHeight * 0.58;
			this.warnWrapperHeight = this.mapWrapperHeight * 0.48;
			this.chartWrapperHeight = this.mainWrapperHeight - this.mapWrapperHeight - 18;
			this.landWrapperHeight = this.mapWrapperHeight - this.warnWrapperHeight - 18;
			this.$nextTick(() => {
				try {
					this.setXunTian(this.XTDataList[0]);
				} catch (e) {}
			});
		});
	},
	mounted() {
		this.chart01 = echarts.init(document.getElementById('chart_xuntian'));
		this.chart02 = echarts.init(document.getElementById('chart_nongzi'));
		this.getLandList();
		this.getTaskAllCount();
		this.getStockAnalysis();
	},
	beforeDestroy() {
		this.$unResize(window);
	},
	methods: {
		// 查询地块地图信息
		async getLandInfo() {
			const response = await getLandProperties();
			const { msg } = response.data;
			console.log('查询地块地图信息', JSON.parse(msg));
			this.genJson = msg;
			this.initMap();
		},
		requestBaseMap() {
			this.raster = new TileLayer({
				source: new OSM()
			});
			this.image = new Image({
				source: new ImageWMS({
					//不能设置为0，否则地图不展示。
					ratio: 1,
					url: 'http://8.130.53.217:8080/geoserver/xam/wms',
					params: {
						FORMAT: 'image/jpeg',
						VERSION: '1.1.1',
						STYLES: '',
						LAYERS: 'xam:1',
						exceptions: 'application/vnd.ogc.se_inimage'
					}
				})
			});
		},
		initMap() {
			const _that = this;
			// 鼠标圆点
			const raster = new TileLayer({
				source: new OSM()
			});
			// 鼠标圆点
			this.source = new VectorSource();
			// 鼠标圆点
			const vector = new Vector({
				source: this.source,
				style: new Style({
					fill: new Fill({
						color: 'transparent'
					}),
					stroke: new Stroke({
						color: '#ffcc33',
						width: 2
					}),
					image: new CircleStyle({
						radius: 7,
						fill: new Fill({
							color: '#ffcc33'
						})
					})
				})
			});
			const highlightStyle = new Style({
				fill: new Fill({
					color: 'rgba(43,255,179,0.4)' //地块选中颜色
				}),
				stroke: new Stroke({
					color: '#2bffb3', //地块边框颜色
					width: 5
				})
			});
			const baseStyle = new Style({
				fill: new Fill({
					color: 'rgba(117,255,30,0.3)'
				}),
				stroke: new Stroke({
					color: '#75ff1e',
					width: 3
				})
			});

			let zoom = 0;
			if (window.screen.availWidth == 3840) {
				zoom = 18.6;
			} else if (window.screen.availWidth == 2560) {
				zoom = 18;
			} else if (window.screen.availWidth == 1920) {
				zoom = 17.44;
			} else if (window.screen.availWidth == 1600) {
				zoom = 17.34;
			} else if (window.screen.availWidth == 1366) {
				zoom = 17.1;
			} else {
				zoom = 17.6;
			}
			this.map = new Map({
				//地图容器ID
				target: 'mapHome',
				//引入地图
				layers: [raster, this.image, vector],
				view: new View({
					//地图中心点
					center: fromLonLat([121.8833790906, 44.7467653]),
					// zoom: 17.6,
					// minZoom:17.6 // 地图缩放最小级别
					zoom: zoom,
					minZoom: zoom, // 地图缩放最小级别
					mouseWheelZoom: false
					// extent: transformExtent(fromLonLat(extend), 'EPSG:4326', 'EPSG:3857')
				})
			});
			const geoJsonObject = JSON.parse(this.genJson);
			const vectorSource = new VectorSource({
				features: new GeoJSON().readFeatures(geoJsonObject, {
					dataProjection: 'EPSG:4326',
					featureProjection: 'EPSG:3857'
				})
			});

			vectorSource.forEachFeature(feature => {
				feature.setStyle(baseStyle);
			});

			const vectorLayer = new Vector({
				source: vectorSource
			});

			this.map.addLayer(vectorLayer);

			let targetFeature = vectorSource.getFeatures()[17];
			targetFeature.setStyle(highlightStyle);
			// this.addInteractions()
			const selectSingleClick = new Select();
			this.map.addInteraction(selectSingleClick);
			selectSingleClick.on('select', function(e) {
				const features = e.target.getFeatures().getArray();
				if (features.length > 0) {
					let feature = features[0];
					feature.setStyle(highlightStyle);
					let property = feature.getProperties();
					if (_that.initMapStatus == 0) {
						targetFeature.setStyle(baseStyle);
						_that.initMapStatus = 1;
					}
					console.log('当前选中地块信息', property);
					// alert("获取地块名称："+ property.name)
				}
			});

			// 删除默认的双击事件
			const dblClickInteraction = this.map
				.getInteractions()
				.getArray()
				.find(interaction => {
					return interaction instanceof DoubleClickZoom;
				});
			this.map.removeInteraction(dblClickInteraction);
			// 删除默认的拖拽事件
			const dragInteraction = this.map
				.getInteractions()
				.getArray()
				.find(interaction => {
					return interaction instanceof DragPan;
				});
			this.map.removeInteraction(dragInteraction);
			//删除默认滑轮
			const zoomInteraction = this.map
				.getInteractions()
				.getArray()
				.find(interaction => {
					return interaction instanceof MouseWheelZoom;
				});
			this.map.removeInteraction(zoomInteraction);
		},
		addInteractions() {
			this.draw = new Draw({
				source: this.source,
				type: 'Point'
			});
			this.map.addInteraction(this.draw);
			this.snap = new Snap({ source: this.source });
			this.map.addInteraction(this.snap);
		},
		playerReadied(player) {
			const track = new videojs.AudioTrack({
				id: 'my-spanish-audio-track',
				kind: 'translation',
				label: 'Spanish',
				language: 'es'
			});
			player.audioTracks().addTrack(track);
			// Get the current player's AudioTrackList object.
			const audioTrackList = player.audioTracks();

			// Listen to the "change" event.
			audioTrackList.addEventListener('change', function() {
				// Log the currently enabled AudioTrack label.
				for (let i = 0; i < audioTrackList.length; i++) {
					const track = audioTrackList[i];
					if (track.enabled) {
						videojs.log(track.label);
						return;
					}
				}
			});
		},
		playerStateChanged(playerCurrentState) {
			console.log('example 5: state changed', playerCurrentState);
		},
		playerIsReady(player) {
			console.log('example 5 ready!', player);
			player.hotkeys({
				volumeStep: 0.1,
				seekStep: 5,
				enableModifiersForNumbers: false,
				fullscreenKey: function(event, player) {
					// override fullscreen to trigger when pressing the F key or Ctrl+Enter
					return event.which === 70 || (event.ctrlKey && event.which === 13);
				}
			});
		},
		async getStockAnalysis() {
			this.stockAnalysisStatus = true;
			const response = await queryStockAnalysis();
			const { code, data, msg } = response.data;
			if (code == 200) {
				this.stockItemList = data;
				this.targetStockId = this.stockItemList[0].id;
				const requestArray = [];
				this.unitArray = [];
				this.stockItemList.forEach(item => {
					this.unitArray.push(item.unit);
					requestArray.push(queryStockAnalysisDetail(item.id));
				});
				Promise.all(requestArray)
					.then(res => {
						res.forEach((item, index) => {
							const res = item.data.data;
							const kcArray = res.kcList.map(kcItem => {
								return kcItem.stockQty;
							});
							const outArray = res.outList.map(outItem => {
								return outItem.stockQty;
							});
							const goodName = this.stockItemList[index].goodName;
							this.NZDataList[index]['data1'] = kcArray;
							this.NZDataList[index]['data2'] = outArray;
							this.NZDataList[index]['data1Label'] = goodName + '库存量';
							this.NZDataList[index]['data2Label'] = goodName + '使用量';
							if (res.warn) {
								this.warnCount[index] = res.warn;
							}
						});
						this.$nextTick(() => {
							this.setNongZi(this.NZDataList);
						});
						this.stockAnalysisStatus = false;
					})
					.catch(err => {
						console.log('获取农资库存分析', err);
						this.$message({ type: 'error', message: err });
						this.stockAnalysisStatus = false;
					});
			} else {
				this.$message({ type: 'error', message: msg });
				this.stockAnalysisStatus = false;
			}
		},
		// async getStockAnalysisDetail(id) {
		//     const response = await queryStockAnalysisDetail(id)
		//     console.log(response)
		//     const {code, data, msg} = response.data
		//     if (code == 200) {
		//         console.log("data=>", data)
		//     } else {
		//         this.$message({type: "error", message: msg})
		//     }
		// },
		// 巡田统计
		async getInspectionInfo() {
			this.inspectionStatus = true;
			const response = await queryInspectionFrequency(1);
			const { code, data, msg } = response.data;
			if (code == 200) {
				this.findLandCount = data.normalCount;
				this.XTDataList[0]['a'] = data.monthCount;
			} else {
				this.$message({ type: 'error', message: '获取巡田统计:' + msg });
			}
			this.setXunTian(this.XTDataList[0]);
			this.inspectionStatus = false;
		},
		async getTaskAllCount() {
			this.taskCountStatus = true;
			const response = await queryTaskAllCount();
			const { code, data, msg } = response.data;
			if (code == 200) {
				try {
					data.forEach(item => {
						if (item.status == '0') {
							this.taskCount3 = item.number;
						} else if (item.status == '1') {
							this.taskCount2 = item.number;
						} else if (item.status == '2') {
							this.taskCount4 = item.number;
						} else {
							this.taskCount1 = item.number;
						}
					});
				} catch (e) {
					this.$message({ type: 'error', message: msg });
				}
				this.taskCountStatus = false;
			}
		},
		// 获取地块列表
		async getLandList() {
			this.isAcreShow = false;
			this.acreList = [];
			const response = await queryLandListList({
				pageSize: 9999,
				pageNum: 1,
				landName: ''
			});
			const { code, data, msg } = response.data;
			if (code == 200) {
				if (data && data.list && data.list.length > 0) {
					const acreList = [];
					data.list.forEach((item, index) => {
						if (index >= 3) {
							return;
						}
						const obj = {
							key: getUUID(),
							id: item.id,
							flag: 1,
							label: item.landName,
							address: item.landAddress,
							status: {
								flag: 1,
								statusColor: item.isPlant && item.isPlant != false ? '#f6550f' : '#d20016',
								statusLabel: item.plantName
							},
							area: item.landArea,
							name: item.plantPerson,
							imgUrl: item.landImg ? item.landImg : require('@/assets/img/home/land.png')
						};
						acreList.push(obj);
					});
					this.acreList = acreList;
				}
				// 请求巡田统计
				this.getInspectionInfo();
				this.isAcreShow = true;
				this.$nextTick(() => {
					setTimeout(() => {
						const width = (this.$refs.acreParentWrap.clientWidth - 30) / 3;
						this.acreList.forEach((item, index) => {
							item.width = width;
							this.$refs['acreCard' + index].setData(item);
						});
					}, 200);
				});
			} else {
				this.$message({
					type: 'error',
					message: msg
				});
			}
		},
		handleClickType(index) {
			this.currentNZ = index;
			this.chart02.setOption(this.NZOptions[this.currentNZ]);
		},
		setNongZi(currentData) {
			const _that = this;
			this.NZOptions = [];
			for (let i = 0; i < currentData.length; i++) {
				const option = {
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						top: 10,
						left: '32%',
						textStyle: {
							color: '#333',
							fontSize: 10
						},
						data: [
							{
								name: currentData[i]['data1Label']
							},
							{
								name: currentData[i]['data2Label']
							}
						]
					},
					grid: {
						top: '16%',
						left: '2%',
						right: '9%',
						bottom: '31%',
						containLabel: true
					},
					xAxis: {
						position: 'bottom',
						type: 'category',
						name: '(月)',
						boundaryGap: false,
						nameTextStyle: {
							verticalAlign: 'bottom',
							color: '#333',
							lineHeight: 10,
							fontSize: 13,
							padding: [0, 0, -18, -4]
						},
						axisLabel: {
							fontSize: 13,
							color: '#333'
						},
						splitLine: {
							// 坐标轴在 grid 区域中的分隔线。
							show: false,
							interval: 'auto',
							lineStyle: {
								width: 1,
								type: 'dashed', // (实线：'solid'，虚线：'dashed'，星罗棋布的：'dotted')
								shadowColor: '#333',
								shadowBlur: 10,
								opacity: 1
							}
						},
						axisLine: {
							// 坐标轴刻度相关设置。
							show: true,
							alignWithLabel: false, // 类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐。
							interval: 'auto', // 坐标轴刻度的显示间隔，在类目轴中有效。默认同 axisLabel.interval 一样。
							inside: false, // 坐标轴刻度是否朝内，默认朝外。
							lineStyle: {
								// 刻度线的样式设置。
								width: 1,
								type: 'solid', // (实线：'solid'，虚线：'dashed'，星罗棋布的：'dotted')
								shadowColor: '#333',
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowOffsetY: 0,
								opacity: 1
							}
						}, // 坐标轴轴线相关设置。
						data: this.getMonth()
					},
					yAxis: {
						show: true, // 是否显示 Y轴
						silent: true,
						nameTextStyle: {
							color: '#333',
							fontSize: 13,
							padding: [0, 0, 2, -10] // 四个数字分别为上右下左与原位置距离
						},
						splitLine: {
							// 坐标轴在 grid 区域中的分隔线。
							show: true,
							interval: 'auto',
							lineStyle: {
								color: '#11604b',
								width: 0.4,
								type: 'dashed', // (实线：'solid'，虚线：'dashed'，星罗棋布的：'dotted')
								shadowColor: 'rgba(0, 0, 0, 0.5)',
								shadowBlur: 10,
								opacity: 1
							}
						},
						axisLabel: {
							fontSize: 12,
							color: '#333'
						},
						axisLine: {
							// 坐标轴刻度相关设置。
							show: true,
							alignWithLabel: false, // 类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐。
							interval: 'auto', // 坐标轴刻度的显示间隔，在类目轴中有效。默认同 axisLabel.interval 一样。
							inside: false, // 坐标轴刻度是否朝内，默认朝外。
							length: 5, // 坐标轴刻度的长度。
							lineStyle: {
								// 刻度线的样式设置。
								width: 1,
								color: '#333',
								type: 'solid', // (实线：'solid'，虚线：'dashed'，星罗棋布的：'dotted')
								shadowColor: 'rgba(0, 0, 0, 0.5)',
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowOffsetY: 0,
								opacity: 1
							}
						}, // 坐标轴轴线相关设置。
						name: '单位: ' + _that.unitArray[i],
						type: 'value'
					},
					series: [
						{
							name: currentData[i]['data1Label'],
							type: 'line',
							stack: '总量',
							data: currentData[i]['data1'],
							symbol: 'circle', //折线点设置为实心点
							itemStyle: {
								normal: {
									color: '#009961', //折线点的颜色
									lineStyle: {
										color: '#009961' //折线的颜色
									}
								}
							},
							markLine: {
								lineStyle: {
									normal: {
										width: 0.5,
										color: 'red' // 这儿设置安全基线颜色
									}
								},
								data: [
									{
										yAxis: _that.warnCount[i]
									}
								],
								symbol: ['none', 'none'],
								label: {
									formatter: ['{b|}'].join('\n'),
									rich: {
										b: {
											backgroundColor: {
												image:
													''
											},
											height: 20
										}
									}
								}
							}
						},
						{
							name: currentData[i]['data2Label'],
							type: 'line',
							stack: '总量',
							data: currentData[i]['data2'],
							symbol: 'circle', //折线点设置为实心点
							itemStyle: {
								normal: {
									color: '#ff6a30', //折线点的颜色
									lineStyle: {
										color: '#ff6a30' //折线的颜色
									}
								}
							},
							markLine: {
								lineStyle: {
									normal: {
										width: 0.5,
										color: 'red' // 这儿设置安全基线颜色
									}
								},
								data: [
									{
										yAxis: _that.warnCount[i]
									}
								],
								symbol: ['none', 'none'],
								label: {
									formatter: ['{b|}'].join('\n'),
									rich: {
										b: {
											backgroundColor: {
												image:
													''
											},
											height: 20
										}
									}
								}
							}
						}
					]
				};
				this.NZOptions.push(option);
			}
			this.chart02.clear();
			this.chart02.setOption(this.NZOptions[this.currentNZ]);
		},
		getMonth() {
			const monthArr = [];
			for (let i = 1; i <= 12; i++) {
				const obj = {
					value: i,
					textStyle: { color: '#333', fontSize: 13 }
				};
				monthArr.push(obj);
			}
			return monthArr;
		},
		setXunTian(currentData) {
			const { a, b } = currentData;
			const option = {
				title: {
					//   text: "折线图堆叠"
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					padding: [0, 80, 0, 80],
					orient: 'horizontal',
					left: '24%',
					width: 300,
					top: '8%',
					textStyle: {
						color: '#333',
						fontSize: 13
					},
					data: ['累计巡田次数']
				},
				grid: {
					top: '22%',
					left: '4%',
					right: '8%',
					bottom: '22%',
					containLabel: true
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					name: '(月)',
					nameTextStyle: {
						verticalAlign: 'bottom',
						color: '#333',
						lineHeight: 100,
						fontSize: 13,
						padding: [0, 0, -64, -6]
					},
					axisLabel: {
						fontSize: 13,
						color: '#333'
					},
					splitLine: {
						// 坐标轴在 grid 区域中的分隔线。
						show: false,
						interval: 'auto',
						lineStyle: {
							width: 0.1,
							color: '#333',
							type: 'solid', // (实线：'solid'，虚线：'dashed'，星罗棋布的：'dotted')
							shadowColor: 'rgba(0, 0, 0, 0.5)',
							shadowBlur: 10,
							opacity: 1
						}
					},
					axisLine: {
						// 坐标轴刻度相关设置。
						show: true,
						alignWithLabel: false, // 类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐。
						interval: 'auto', // 坐标轴刻度的显示间隔，在类目轴中有效。默认同 axisLabel.interval 一样。
						inside: false, // 坐标轴刻度是否朝内，默认朝外。
						length: 5, // 坐标轴刻度的长度。
						lineStyle: {
							// 刻度线的样式设置。
							color: '#333',
							width: 1,
							type: 'solid', // (实线：'solid'，虚线：'dashed'，星罗棋布的：'dotted')
							shadowColor: 'rgba(0, 0, 0, 0.5)',
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowOffsetY: 0,
							opacity: 1
						}
					}, // 坐标轴轴线相关设置。
					data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
				},
				yAxis: {
					show: true, // 是否显示 Y轴
					silent: true,
					nameTextStyle: {
						color: '#333',
						fontSize: 13,
						padding: [0, 0, 3, -14] // 四个数字分别为上右下左与原位置距离
					},
					splitLine: {
						// 坐标轴在 grid 区域中的分隔线。
						show: true,
						interval: 'auto',
						lineStyle: {
							color: '#164451',
							width: 0.2,
							type: 'dashed', // (实线：'solid'，虚线：'dashed'，星罗棋布的：'dotted')
							shadowColor: 'rgba(0, 0, 0, 0.5)',
							shadowBlur: 10,
							opacity: 1
						}
					},
					axisLabel: {
						fontSize: 13,
						color: '#333'
					},
					axisLine: {
						// 坐标轴刻度相关设置。
						show: true,
						alignWithLabel: false, // 类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐。
						interval: 'auto', // 坐标轴刻度的显示间隔，在类目轴中有效。默认同 axisLabel.interval 一样。
						inside: false, // 坐标轴刻度是否朝内，默认朝外。
						length: 5, // 坐标轴刻度的长度。
						lineStyle: {
							// 刻度线的样式设置。
							width: 1,
							color: '#333',
							type: 'solid', // (实线：'solid'，虚线：'dashed'，星罗棋布的：'dotted')
							shadowColor: 'rgba(0, 0, 0, 0.5)',
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowOffsetY: 0,
							opacity: 1
						}
					}, // 坐标轴轴线相关设置。
					name: '单位:次',
					type: 'value'
				},
				series: [
					{
						name: '累计巡田次数',
						type: 'line',
						// stack: "总量",
						data: a,
						symbol: 'circle', //折线点设置为实心点
						itemStyle: {
							normal: {
								color: '#2bd4ff', //折线点的颜色
								lineStyle: {
									color: '#2bd4ff' //折线的颜色
								}
							}
						}
					}
					// {
					//     name: "当前巡田次数",
					//     type: "line",
					//     stack: "总量",
					//     data: b,
					//     symbol: "circle", //折线点设置为实心点
					//     itemStyle: {
					//         normal: {
					//             color: "#fcb738", //折线点的颜色
					//             lineStyle: {
					//                 color: "#fcb738" //折线的颜色
					//             }
					//         }
					//     }
					// }
				]
			};
			this.chart01.clear();
			this.chart01.setOption(option);
		},
		handleClickMore() {
			// PubSub.publish("ROUTER_REFRESH", {menuId:9, name:"农事管理"})
			this.$router.push({ path: '/farmEvent-farmEvent' });
		},
		handleClickQuickItem(index) {
			switch (index) {
				case 1:
				case 2:
				case 3:
				case 4:
				case 5:
				case 6:
					this.$message({ type: 'info', message: '敬请期待~' });
					break;
			}
		}
		// playerOptions: {
		//     autoplay: true, //如果true,浏览器准备好时开始回放。
		//     muted: false, // 默认情况下将会消除任何音频。
		//     loop: false, // 导致视频一结束就重新开始。
		//     preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
		//     language: "zh-CN",
		//     aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
		//     fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
		//     // sources: [{
		//     //     type: "application/x-mpegURL",
		//     //     src: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" //你的m3u8地址（必填）
		//     // }],
		//     sources: [
		//         // {
		//         //     type: "application/x-mpegURL",
		//         //     // src: "http://106.74.128.154:83/openUrl/lmBks3C/live.m3u8"
		//         //     src: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" //你的m3u8地址（必填）
		//         // },
		//         {
		//             type: "rtmp/mp4",
		//             src: "rtmp://58.200.131.2:1935/livetv/hunantv",
		//             // src: "rtmp://106.74.128.154:1935/live/openUrl/gzIkodW",
		//         }
		//     ],
		//     techOrder: ["flash", "html5"],
		//     // poster: "poster.jpg", //你的封面地址
		//     width: document.documentElement.clientWidth,
		//     notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
		// },
	}
};
</script>
<style>
.ol-uncollapsible {
	display: none;
}
</style>
<style scoped>
.acre-container {
	position: relative;
	height: 100%;
}

.acre-more {
	position: absolute;
	right: 0px;
	top: 6px;
	color: #656565;
	cursor: pointer;
}

.acre-more:hover {
	font-weight: bolder;
}

.flex-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.warn-item-wrap {
	color: #fff;
	height: 100%;
	objectfit: fill;
	cursor: pointer;
	background-size: 100% 100%;
}

.warn-item-wrap div:first-child {
	text-align: center;
	letter-spacing: 2px;
	font-size: 16px;
}

.warn-item-wrap div:last-child {
	text-align: center;
	font-weight: bolder;
	font-size: 36px;
}

.acre-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.acre-wrap-item {
	flex: 1;
	margin: 0 6px;
}

.acre-wrap .acre-wrap-item:first-child {
	margin-left: 0px;
}

.acre-wrap .acre-wrap-item:last-child {
	margin-right: 0px;
}

.charts-container {
	display: flex;
	margin-top: 18px;
}

.charts-item-wrap {
	flex: 1;
	margin: 0 8px;
}

.charts-container .charts-item-wrap:first-child {
	margin-left: 0px;
}

.charts-container .charts-item-wrap:last-child {
	margin-right: 0px;
}

.inventory-item-wrap {
	display: flex;
}

.inventory-item {
	cursor: pointer;
	color: #fff;
	font-size: 12px !important;
	background-image: url('../../assets/img/home/qhanwxz.png');
	background-size: 100% 100%;
	width: 40px;
	text-align: center;
	padding: 4px 6px;
	border-radius: 4px;
	color: #009865;
	background-color: #fff;
	margin: 0px 8px 0px 3px;
}

.inventory-item-active {
	color: #fff;
	background-color: #009865;
	font-weight: bolder;
}

.task-wrapper-up {
	display: flex;
	height: 42%;
	padding: 10px 0 10px 0;
	margin: 0 20px;
}

.task-wrapper-down {
	display: flex;
	height: 42%;
	padding: 0 0 20px 0;
	margin: 0 20px;
}

.task-item-wrap {
	line-height: 800%;
	display: flex;
	align-items: baseline;
	padding-left: 70px;
	font-size: 16px;
	margintop: 40px;
	color: #fff;
}

.task-item-title {
	flex: 5;
	text-align: right;
}

.task-item-value {
	font-size: 30px;
	font-weight: bolder;
	flex: 4;
	text-align: center;
}

.task-item-type {
	flex: 3;
	padding-left: 6px;
}
</style>
